<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>React 版本:15.6.1</title>
</head>
<body>
	<h1>React 组件实例</h1>
	<div id="app"></div>
	<script src="react/react.js"></script>
	<script src="react/react-dom.js"></script>
	<script src="react/browser.min.js"></script>
	<script  type="text/babel">
		var HelloComponent =React.createClass({
			getInitialState:function () {
				return {opacity:0.2};
			},
			render:function(){
				return (
					<div style={{opacity:this.state.opacity}}>
						<h2>Hello {this.props.name}</h2>
					</div>
				);
			},
			componentDidMount:function(){
				setInterval(()=>{// 使用镜头函数代替bind(this)
					let opacity = this.state.opacity;
					opacity -= 0.05;
					if(opacity <=0){
						opacity = 1;
					}
					this.setState({'opacity':opacity});
				},100);
			}
		});

		ReactDOM.render(
			React.createElement(HelloComponent,null),
			document.getElementById('app')
		)
	</script>
</body>
</html>